<template>
  <div class="index_list_panel">
    <div class="panel-content" :style="panelStyle">
      <div v-for="(item, index) in data" :key="item.name + index" class="list-box" >
        <div class="name">
          <div class="name-content">
            <marquee class="my-marquee" v-if="item.name1 && !getWidthShow(item, 4)" behavior="scroll" direction="left" scrollamount="3">
              <span class="title1">{{ item.name1 }}</span>
            </marquee>
            <span v-else class="title1">{{ item.name1 }}</span>
            <span>{{ item.name }}</span>
            <span class="unit" v-if="item.unit">（{{ item.unit }}）</span>
          </div>
        </div>
        <div class="value">
          <animated-number :value="item.value" :duration="1500" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import AnimatedNumber from './vue/animatedNumber/index.vue'
  export default {
    components: {
      AnimatedNumber
    },
    name: 'indexListPanel4',
    props: {
      /**
       * 数据
       */
      data: {
        type: Array,
        default: () => [
          { name: '11', value: '132', unit: '' },
          { name: '22', value: '22', unit: '' },
          { name: '33', value: '45', unit: '' },
        ],
      },
      /**
       * 列数
       */
      span: {
        type: Number,
        default: () => 0,
      },
      /**
       * 间隔
       */
      columnGap: {
        type: Number,
        default: 8,
      },
      /**
       * 行间隔
       */
      rowGap: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {}
    },
    computed: {
      /**
       * 面板样式
       */
      panelStyle() {
        return {
          columnGap: this.columnGap + 'px',
          rowGap: this.rowGap + 'px',
          '--indexListPanel4GridColumns':
            this.span > 0 ? this.span : 'auto-fill',
        }
      },
    },
    created() {},
    mounted() {},
    methods: {
      getWidthShow(item, maxlen) {
        let len = 0
        if(item.name1 && item.name1.length){
          len = item.name1.length
          if(len > maxlen){
            return false
          }else{
            return true
          }
        }else{
          return true
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index_list_panel {
    width: 920px;
    height: 100%;

    .panel-content {
      display: grid;
      grid-template-columns: repeat(
        var(--indexListPanel4GridColumns),
        minmax(160px, 1fr)
      );
      width: 100%;

      & > .list-box {
        box-sizing: border-box;
        width: 300px;
        height: 115px;
        background-image: url(./assets/bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .name {
          height: 30px;
          padding: 0 10px;
          margin-top: 12px;
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 500;
          line-height: 15px;
          color: #fff;
          text-align: left;
          letter-spacing: 0.6px;
          background-image: url(./assets/name-icon.png);
          background-repeat: no-repeat;
          background-position: bottom center;
          background-size: calc(100% - 20px) 80%;
          .name-content {
            width: fit-content;
            height: 100%;
            .my-marquee{
              width: 130px;
              margin-right: 5px;
            }
            .title1 {
              font-size: 20px;
              padding-right: 5px;
              color: #FFA73C;
              font-weight: 600;
            }

            .unit {
              font-size: 12px;
            }
          }
        }

        .value {
          height: 48px;
          margin: 12px 12px;
          line-height: 48px;
          text-align: center;
          background-image: url(./assets/value-icon.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100%;
          font-family: Arial;
          font-size: 28px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          letter-spacing: 1px;
        }
      }
    }
  }
</style>
